// 填报指南页面
import PageLayout from "@/layout/PageLayout";
import { Button, Radio, Space, Sticky, Timeline } from "@taroify/core";
import { View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import React from "react";

const CompletionGuide: React.FC = () => {
  return (
    <View className="w-full h-[100vh]">
      <View className="px-4 my-2">
        <View className="text-lg font-semibold text-[rgba(0,0,0,0.88)]">
          每月食品安全检查 - 操作指南
        </View>
        <View className="text-sm">当前企业：演示账号(安居流通)</View>
        <View className="text-sm">企业类别：食品流通</View>
      </View>
      <PageLayout>
        <View className="mt-2">
          <View className="my-2">填报流程</View>
          <View className="w-full p-4 bg-white">
            <Timeline position="right">
              <Timeline.Item>
                <Timeline.Separator>
                  <Timeline.Dot
                    color="info"
                    className="flex flex-row items-center justify-center w-6 h-6 flex-nowrap"
                  >
                    1
                  </Timeline.Dot>
                  <Timeline.Connector />
                </Timeline.Separator>
                <Timeline.Content direction="column">
                  <View className="timeline-title">检查填报</View>
                  <View className="text-xs text-gray-400">
                    依据制定的检查内容如实填报检查情况
                  </View>
                </Timeline.Content>
              </Timeline.Item>
              <Timeline.Item>
                <Timeline.Separator>
                  <Timeline.Dot
                    color="info"
                    className="flex flex-row items-center justify-center w-6 h-6 flex-nowrap"
                  >
                    2
                  </Timeline.Dot>
                  <Timeline.Connector />
                </Timeline.Separator>
                <Timeline.Content direction="column">
                  <View className="timeline-title">自检结论</View>
                  <View className="text-xs text-gray-400">
                    依据检查情况填写自检结论
                  </View>
                </Timeline.Content>
              </Timeline.Item>
              <Timeline.Item>
                <Timeline.Separator>
                  <Timeline.Dot
                    color="info"
                    className="flex flex-row items-center justify-center w-6 h-6 flex-nowrap"
                  >
                    2
                  </Timeline.Dot>
                  <Timeline.Connector />
                </Timeline.Separator>
                <Timeline.Content direction="column">
                  <View className="timeline-title">信息提交</View>
                  <View className="text-xs text-gray-400">
                    核对填报信息，确认无误后提交
                  </View>
                </Timeline.Content>
              </Timeline.Item>
            </Timeline>
          </View>
        </View>
      </PageLayout>
      <Sticky position="bottom" offsetBottom={50}>
        <View className="">
          <Space justify="center" size="mini">
            <Radio size={16} />
            <Text className="text-xs">
              我已认真阅读并同意《企业主体责任落实上报承诺书》
            </Text>
          </Space>
        </View>
        <Button
          color="info"
          block
          onClick={() =>
            Taro.redirectTo({
              url: "/pages/IntelFilling/components/MonthReport/components/MonthSafelyCheck/index",
            })
          }
        >
          开始填报
        </Button>
      </Sticky>
    </View>
  );
};

export default CompletionGuide;
